<template>
  <div class="header">
      <div class="left" @click="toindex()">
          <img src="@/assets/index/header-left.png" alt="">
      </div>
      <div class="center" @click="toindex()">
          <img src="@/assets/index/header-center.png" alt="">
      </div>
       <div class="right">
          <img src="@/assets/index/header-right.png" alt="">
      </div>
  
  </div>
</template>

<script>
import axios from 'axios'
import { mapState } from 'vuex'

export default {
    name: 'Index',
    data () {
        return {
        
        }
    },
    computed:{
        ...mapState(['baseUrl'])
    },
    methods:{
        toindex(){
            this.$router.push({name: 'Index'})
        }
    }
}
</script>


<style lang="stylus" scoped>
// 1rem = html font-size = 50px

@import "~@styles/varibles.styl";
@import "~@styles/mixins.styl";
img 
    width 100%
.header
    line-height:$headerHeight
    height:$headerHeight
    position relative
    background:$bgColor
    color:#fff 
    .left
        width:.4rem
        float:left
        margin-left 0.25rem
    .center
        float left
        width 1.87rem
        top 0
        height:0.4rem
        position absolute
        left 50%
        margin-left -0.935rem
    .right
        width 0.4rem
        height 0.4rem
        float:right
        margin-right 0.25rem
</style>
